<template>
  <div class="article-detail-container">
    <h2 class="title">{{ detailData.title }}</h2>
    <div class="header">
      <span class="author">作者：{{ detailData.author }}</span>
      <span class="time">发布日期：{{ detailData.publicDate }}</span>
      <el-button type="primary" link class="edit" @click="onEditClick">编辑</el-button>
    </div>
    <div class="content" v-html="detailData.content"></div>
  </div>
</template>

<script setup>
import { useRequest } from 'vue-request'
import { useRoute, useRouter } from 'vue-router'
import { articleDetail } from '@/api/article.js'
const route = useRoute()
const { data: detailData } = useRequest(async () => {
  return await articleDetail(route.params.id)
}, {
  initialData: {}
})
const router = useRouter()
const onEditClick = () => {
  router.push({
    name: 'article-edit',
    params: { id: route.params.id }
  })
}
</script>

<style lang="scss" scoped>
.article-detail-container {
  .title {
    font-size: 22px;
    text-align: center;
    padding: 12px 0;
  }

  .header {
    padding: 26px 0;

    .author {
      font-size: 14px;
      color: #555666;
      margin-right: 20px;
    }

    .time {
      font-size: 14px;
      color: #999aaa;
      margin-right: 20px;
    }

    .edit {
      float: right;
    }
  }

  .content {
    font-size: 14px;
    padding: 20px 0;
    border-top: 1px solid #d4d4d4;
  }
}
</style>